<template>
  <mid-dialog-box :title="title" @closeMidDialog="closeMidDialog">
      <div class="descContent height_100 width_100 pt-">
        <div class="avatar">
          <avatar :avatar="userData.avatar" :name="userData.name"></avatar>
        </div>
        <div class="userdesc">
          <div class="descKeys">
            <ul>
              <li>姓名：</li>
              <li>组织/项目：</li>
              <li>所属部门：</li>
              <li>职位：</li>
              <li>手机号：</li>
            </ul>
          </div>
          <div class="descValues">
            <ul>
              <li>1111</li>
              <li>222</li>
              <li>3333</li>
              <li>444</li>
              <li>5555</li>
            </ul>
          </div>
        </div>
      </div>
  </mid-dialog-box>
</template>

<script>
export default {
  data () {
    return {
      userData: { avatar: '-100', name: '666' },
      title: '查看详情'
    }
  },
  methods: {
    closeMidDialog () {
      this.$emit('closeMidDialog')
    }
  }
}
</script>

<style lang="scss" scoped>
    .descContent{
        padding-top: 48px;
        // background-color: pink;
        .avatar{
          margin: 0 auto;
          width: 72px;
          height: 72px;
        }
        .userdesc{
          display: flex;
          margin-top: 30px;
          .descKeys,.descValues{
            flex: 1;
            li{
              height: 50px;
              font-size: 16px;
              font-weight: 500;
              color: #273553;
            }
          }
          .descKeys{
            li{
              font-weight: 400;
              color: #3F4F71;
              text-align: right;
            }
          }
        }
    }
</style>
